<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			body{
				background-color: blueviolet;
			}
			.contianer{
			    width: 880px;
				margin: 100px auto;
			}
			
			.contianer>img{
				/*边框*/
				border: 10px solid white;
			    /*padding: 10px;
			    background-color: blue; */
				/*阴影*/
				box-shadow: 10px 10px 10px black;
				transition: all 0.3s;
				/*relative：不会改变页面结构*/
				position: relative;
			}
			
			.contianer>img:nth-child(2n+1){
				transform: rotate(-20deg);
			}
			
			.contianer>img:nth-child(2n){
				transform: rotate(20deg);
			}
			.contianer>img:hover{
				/*摆正以及放大1.5倍*/
				transform: rotate(0deg) scale(1.5);
				z-index: 1;
			}
			
			
			
			
			
			
		</style>
	</head>

	<body>

		<div class="contianer">
			<img src="imgwall/1.jpg" />
			<img src="imgwall/2.jpg" />
			<img src="imgwall/3.jpg" />
			<img src="imgwall/4.jpg" />
			<img src="imgwall/5.jpg" />
			<img src="imgwall/6.jpg" />
			<img src="imgwall/7.jpg" />
			<img src="imgwall/8.jpg" />
			<img src="imgwall/9.jpg" />
		</div>

	</body>

</html>